<template>
<div class="container">
    <div class="topimg">数据分析</div>
    <div class="chartcontainer">
        <div class="choice">
            <div 
                class="button" 
                :class="{ 'active': activeButton === 0 }"
                @click="setActiveButton(0)"
            >
                识别地点
            </div>
            <div 
                class="button" 
                :class="{ 'active': activeButton === 1 }"
                @click="setActiveButton(1)"
            >
                称重器ID
            </div>
            <div 
                class="button" 
                :class="{ 'active': activeButton === 2 }"
                @click="setActiveButton(2)"
            >
                本周识别
            </div>
        </div>
        <div class="chart1" id="rightchart1" v-if="activeButton === 0">
            <addchart :active-button="activeButton"/>
        </div>
        <div class="chart2" id="rightchart2" v-if="activeButton === 1">
            <weichart/>
        </div>
        <div class="chart3" id="rightchart3" v-if="activeButton === 2">
            <idenchart/>
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue';
import addchart from './charts/addchart.vue';
import weichart from './charts/weichart.vue';
import idenchart from './charts/idenchart.vue';

// 添加激活按钮的状态管理
const activeButton = ref(0);

// 修改：从localStorage中读取保存的按钮状态，如果没有则默认为0
const setActiveButton = (index: number) => {
    activeButton.value = index;
    // 保存当前选中的按钮状态到localStorage
    localStorage.setItem('smartWeighingActiveButton', index.toString());
};

onMounted(() => {
    // 页面加载时从localStorage恢复按钮状态
    const savedActiveButton = localStorage.getItem('smartWeighingActiveButton');
    if (savedActiveButton !== null) {
        activeButton.value = parseInt(savedActiveButton, 10);
    }
});

</script>

<style scoped>
.container{
    width: 100%;
    height: 100%;
    /* background-color: skyblue; */
}
.topimg{
  font-size: 24px;
  height: 40px;
  background-image: url(@/assets/top.png);
  background-size: cover;
  text-align: center;
}
.chartcontainer{
    width: 100%;
    height: 90%;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.choice{
    display: flex;
    justify-content: center;
    height: 10%;
    /* background-color: white;  */
    position: relative;
    top: 10px;
}
.button{
    background-color: rgba(0, 0, 255, 0.3);
    width: 20%;
    margin: 0 5%;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
}
/* 添加激活状态的样式 */
.button.active {
    background-color: blue;
}
.chart1{
    width: 100%;
    height: 90%;
    /* background-color: skyblue; */
}
.chart2{
    width: 100%;
    height: 90%;
    /* background-color: skyblue; */
}.chart3{
    width: 100%;
    height: 90%;
    /* background-color: skyblue; */
}
</style>